<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>字符串练习</title>
  </head>

  <body class="xxx-box">
    <form action="index.php" method="get">
      <input type="text" name="ie" value="UTF-8" />
      <input type="text" name="wd" value="letcode" />
      <button>提交</button>
    </form>

    <script>
      // 1. 封装一个函数实现字符串翻转。
      // "123456" --> "654321"

      function f1(str) {
        // split  字符串转数组
        // 方法一
        // return str.split('').reverse().join('');

        // 方法二
        let newStr = '';
        for (let i = str.length - 1; i >= 0; i--) {
          newStr += str.charAt(i);
        }
        return newStr;
      }

      console.log(f1('123456')); // "654321"

      // 2. 字符串 digite = "0123456789", 把前 5 个字符分割出来， 返回个单字符的数组, 注意， 返回数组里面的数字是字符串类型, string.split()
      let digite = '0123456789';

      console.log(digite.split('', 5));

      // 3.已知有字符串 foo=”get-element-by-id”,写一个 function 将其转化成驼峰表示法”getElementById”.

      // GetElementById 构造函数
      // getElementById 变量名、函数
      // get-element-by-id css样式类名

      let str3 = 'get-element-by-id';

      function f3(str) {
        // 方法二
        let newStr = ''; // 保存每次操作的字符
        str.split('-').forEach(function (item, index) {
          if (index) {
            // 首字母大写
            // 修改item  element -- e、l、e、m、e、n、t
            // 字符串的下标和数组一样, 从0开始, 首字母下标0
            item = item.replace(item.charAt(0), item.charAt(0).toUpperCase());
          }
          newStr += item;
        });
        return newStr;

        // 方法一
        for (let i = 0; i < str.length; i++) {
          if (str.charAt(i) === '-') {
            // '-' 后一个字符转大写, 然后替换, 字符串的方法是否会影响原数据?
            // replace 替换
            str = str.replace(
              str.charAt(i) + str.charAt(i + 1), // -e 、 -b、-i
              str.charAt(i + 1).toUpperCase() // E、B、i
            );
          }
        }
        return str;
      }

      console.log(f3(str3));

      // 4.定义一个函数,将"今天是什么鬼天气，这么热，明天要去游泳！"里面的有"天"的下标输出(用 indexof())

      let str4 = '今天是什么鬼天气，这么热，明天要去游泳！';

      function f4(str) {
        // 输出的次数是未知? 多次或者一次 (重复的事情)
        // while循环
        let index = str.indexOf('天');
        while (index != -1) {
          console.log(index); // 1 6 14
          index = str.indexOf('天', index + 1);
        }

        return; // 终止函数执行
        // for循环
        for (let i = 0; i < str.length; i++) {
          const element = str[i];
          if (element === '天') {
            console.log(str.indexOf(element, i));
          }
        }
      }

      f4(str4);

      // 5.定义一个函数,将"今天是什么鬼天气，这么热，明天要去游泳！"里面的有"天"替换成"日"(用 replace())

      let str5 = '今天是什么鬼天气，这么热，明天要去游泳！';

      console.log(str5.replace(/天/g, '日'));

      // 6.解析 URL Params 为对象，例如(https://www.baidu.com/s?ie=UTF-8&wd=letcode)

      // 返回结构如下:
      // {
      //     "ie":"UTF-8",
      //     "wd":"letcode"
      // }

      let url = 'https://www.baidu.com/s?ie=UTF-8&wd=letcode';
      let obj = {};

      // obj['ie'] = 'UTF-8';
      // obj['wd'] = 'letcode';
      // console.log(obj);

      url
        .split('?')[1]
        .split('&')
        .forEach(function (value, index, arr) {
          // console.log(value.split('=')[0]);
          // console.log(value.split('=')[1]);
          obj[value.split('=')[0]] = value.split('=')[1];
        });
      console.log(obj);

      // 7.查找字符串中(abbcccddddd)出现最多的字符和个数 (并统计每个字符出现的次数)

      let str7 = 'aabbbcc';

      function f7(str) {
        //  统计字符的最多次数, 把所有字符都要统计
        // 推荐使用对象 (利用对象键名特点唯一)
        let obj = {};

        for (let i = 0; i < str.length; i++) {
          const element = str[i];
          // 把所有的字符串当作是对象的键名, 若果出现重复的, 直接在当前的键值上自增
          // obj[xxx] = 1;
          // obj[xxx]++;

          // 添加之前, 确定对象是否存在当前的键名, 不存在默认出现1次, 存在自增
          if (obj[element]) {
            obj[element]++; // 出现多次, 自增
          } else {
            obj[element] = 1; // 出现一次, 默认值为1
          }
        }
        console.log(obj);
        // 假设最大值 (假的)
        let max = 0;
        let tag = '';
        // for in  循环对象用的, 不能直接使用for循环
        for (const key in obj) {
          // key      键名
          // obj[key] 键值
          const element = obj[key];
          // 判断最大值
          if (element >= max) {
            max = element; // 更新max
            tag = key; // 键名, 赋值的意义是想要在for in循环获取最大值的字符名
          }
        }

        console.log(`当前出现最多次数的是${tag}字符, 共出现了${max}次`);
      }

      f7(str7);

      // 8. "hi javascript hi hello world!" 改成 "Hi Javascript! Hi Hello World!"

      let str8 = 'hi javascript hi hello world!';

      // 9. 把 "hi javascript!" 改成 "Hi Javascript!"
      let str9 = 'hi javascript';

      // 10. 定义一个函数, 函数功能是检测字符串是否包含指定字符, (指定字符可以支持多个, 只要包含其中一个指定字符即返回结果)

      let str10 = '5678';

      function fn(str, arr) {
        for (let i = 0; i < str.length; i++) {
          const element = str.charAt(i);
          // if (arr.includes(element)) {
          //   return true; // 中断函数的执行
          // }
          if (arr.some((v) => v === element)) {
            return true; // 中断函数的执行
          }
        }

        return false;
      }

      let fnRes = fn(str10, ['1', '2']);
      if (fnRes) {
        console.log('涉及敏感字体');
      }
    </script>
  </body>
</html>
